<template>
  <div class="main-div">
    <div class="main-search-div">
      <el-form ref="searchRef"
               :model="searchItem"
               status-icon
               inline>
        <el-form-item label="模型名称" prop="modalName" class="main-search-item-4">
          <el-input v-model="searchItem.modalName" type="text"/>
        </el-form-item>
        <el-form-item label="模型标识" prop="modalKey" class="main-search-item-4">
          <el-input v-model="searchItem.modalKey" type="text"/>
        </el-form-item>
        <el-form-item label="是否停用" prop="isStop" class="main-search-item-4">
          <common-dict-select v-model="searchItem.isStop" :dict-key="AI_IS_STOP"></common-dict-select>
        </el-form-item>
        <el-form-item label="模型类型" prop="modalType" class="main-search-item-4">
          <common-dict-select v-model="searchItem.modalType" :dict-key="AI_MODAL_TYPE"></common-dict-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" :loading="searchLoading">查询</el-button>
          <el-button @click="reset(searchRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-button-div">
      <el-button type="primary" @click="addFn">新增</el-button>
      <el-popconfirm title="是否删除?" @confirm="delFn">
        <template #reference>
          <el-button type="danger">删除</el-button>
        </template>
      </el-popconfirm>

    </div>
    <div class="main-table-div">
      <common-page-table
          :data="tableData"
          :columns="columns"
          :pagination="pagination"
          :show-border="true"
          :need-one-select="true"
          :show-no="true"
          :loading="tableLoading"
          :show-action="true"
          :action-config="actionConfig"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
          @handle-current-change="handleTableCurrentChange"
      >
        <template #action="{row}">
          <el-button type="primary" size="small" round @click="editFn(row)">编辑</el-button>
          <el-button :type="formatObjToStr(row.isStop) === '0' ? 'danger' : 'primary'" size="small" round @click="changeStopFn(row)">{{formatObjToStr(row.isStop) === '0' ? '停用' : '启用'}}</el-button>
        </template>
      </common-page-table>
    </div>
  </div>
  <ai-config-save-dialog
      v-model="dialogItem.showDialog"
      :show-dialog="dialogItem.showDialog"
      :dialog-title="dialogItem.dialogTitle"
      :dialog-type="dialogItem.dialogType"
      :relation-id="dialogItem.relationId"
      @handle-closed="handleClosed($event)"
      @handle-close="handleClose($event)"
  >

  </ai-config-save-dialog>
</template>

<script setup lang="ts">
import {
  AI_IS_STOP, AI_MODAL_TYPE
} from "@/constants/dict-constants.ts";
import CommonDictSelect from "@/components/common/CommonDictSelect.vue";
import {onMounted, reactive, ref} from "vue";
import type {FormInstance} from "element-plus";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config.ts";
import CommonPageTable from "@/components/common/CommonPageTable.vue";
import {DIALOG_ADD, DIALOG_EDIT} from "@/constants/common-constant.ts";
import {checkIsNull} from "@/utils/check-utils.ts";
import {elMessageTip, warningMessageTip} from "@/utils/tip-utils.ts";
import {formatObjToStr} from "@/utils/format-utils.ts";
import {delAiConfigItemReq, getAiConfigListReq, restartAiConfigReq, stopAiConfigReq} from "@/api/ai/ai.ts";
import AiConfigSaveDialog from "@/components/ai/config/AiConfigSaveDialog.vue";

interface SearchItem {
  modalName: string,
  modalKey: string,
  isStop: string,
  modalType: string,
}

const searchItem: SearchItem = reactive({
  modalName: '',
  modalKey: '',
  isStop: '',
  modalType: '',
})

const searchRef = ref<FormInstance>()

const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const searchLoading = ref(false)
const search = async () => {
  searchList().then();
}

const searchList = async () => {
  searchLoading.value = true

  const params = {
    modalName: searchItem.modalName,
    modalKey: searchItem.modalKey,
    isStop: searchItem.isStop,
    pageNum: pagination.currentPage,
    pageSize: pagination.pageSize
  }
  const res: any = await getAiConfigListReq(params)
  searchLoading.value = false
  if (res.code === RESPONSE_CODE_SUCCESS) {
    tableData.value = res.data.rows;
    pagination.total = res.data.total
  }
  searchLoading.value = false
}

const tableData = ref<any[]>([])
const columns = [
  {prop: 'modalKey', label: '模型标识', width: 'auto', fixed: 'left'},
  {prop: 'modalName', label: '模型名称', width: 'auto'},
  {prop: 'modalTypeLabel', label: '模型类型', width: 'auto'},
  {prop: 'modalApiKey', label: 'apiKey', width: 'auto'},
  {prop: 'modalUrl', label: '模型官网地址', width: 'auto'},
  {prop: 'isStopLabel', label: '是否停用', width: 'auto'},
  {prop: 'introduce', label: '说明', width: 'auto'}
]
const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const total = ref<number>(0)
const pagination = reactive({
  currentPage: currentPage.value,
  pageSize: pageSize.value,
  total: total.value
})
const tableLoading = ref<boolean>(false)
const actionConfig = {
  prop: 'action',
  label: '操作',
  width: '200px',
}

const currentRow = ref()
const sizeChange = (val: number) => {
  pageSize.value = val;
  pagination.pageSize = val;

  searchList().then();
}

const currentChange = (val: number) => {
  currentPage.value = val;
  pagination.currentPage = val;

  searchList().then();
}
const handleTableCurrentChange = (row: any) => {
  currentRow.value = row
}

interface DialogItem {
  showDialog: boolean;
  dialogTitle: string;
  dialogType: string;
  relationId: string;
}
const dialogItem: DialogItem = reactive<DialogItem>({
  showDialog: false,
  dialogTitle: '',
  dialogType: '',
  relationId: ''
})

const addFn = () => {
  dialogItem.showDialog = true
  dialogItem.dialogTitle = '新增模型数据'
  dialogItem.dialogType = DIALOG_ADD
  dialogItem.relationId = ''
}

const delFn = async () => {
  const selectRow = currentRow.value
  if (checkIsNull(selectRow.id)){
    warningMessageTip("请至少选择一条数据");
    return;
  }

  const params = {
    id: selectRow.id
  }
  const res: any = await delAiConfigItemReq(params)
  elMessageTip(res.tipType, res.message)
  if (res.code === RESPONSE_CODE_SUCCESS) {
    searchList().then()
  }
}

const editFn = (row: any) => {
  dialogItem.showDialog = true
  dialogItem.dialogTitle = '编辑模型数据'
  dialogItem.dialogType = DIALOG_EDIT
  dialogItem.relationId = row.id
}

const handleClosed = (val: boolean) => {
  dialogItem.showDialog = val
  searchList().then()
}

const handleClose = (val: boolean) => {
  dialogItem.showDialog = val
}

const changeStopFn = async (row: any) => {
  const params = {
    id: row.id
  }
  if (formatObjToStr(row.isStop) === '1'){
    const res: any = await restartAiConfigReq(params)
    elMessageTip(res.tipType, res.message)
    if (res.code === RESPONSE_CODE_SUCCESS) {
      searchList().then()
    }
  }

  if (formatObjToStr(row.isStop) === '0'){
    const res: any = await stopAiConfigReq(params)
    elMessageTip(res.tipType, res.message)
    if (res.code === RESPONSE_CODE_SUCCESS) {
      searchList().then()
    }
  }
}

onMounted(async () => {
  searchList().then();
})
</script>

<style scoped>

</style>